<template>
  <div class="category-container">
    <!-- 差异化导航栏配置 -->
    <Navbar logoText="商品分类">
      <template #nav-links>
        <a href="#" class="nav-link">首页</a>
        <a href="#" class="nav-link active">商品分类</a>
        <a href="#" class="nav-link">发布商品</a>
        <a href="#" class="nav-link">个人中心</a>
      </template>
      <template #actions>
        <button class="filter-btn">筛选</button>
      </template>
    </Navbar>

    <!-- 内容区域 -->
    <div class="content-wrapper">
      <h2>商品分类页面</h2>
      <!-- 分类内容 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from '../components/Navbar.vue';

</script>

<style scoped>
.category-container {
  max-width: 100vw;
  margin: 0 auto;
  padding: 0 2vw;
  background-color: #ffffff;
  box-sizing: border-box;
}

.content-wrapper {
  padding-top: 80px; /* 为固定导航栏预留空间 */
}

.filter-btn {
  padding: 8px 15px;
  background: var(--primary-text);
  color: white;
  border: none;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-default);
  cursor: pointer;
}

.filter-btn:hover {
  background-color: #0b3d85;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>